﻿@inject IFlatProductsProvider FlatProductService

<div class="demo-description mw-1100">
    <h2><DemoNavLink Link="GridSelection#OptimizedMultipleSelection" />Multiple Selection with Optimized Performance</h2>
    <p>
        Enable multiple selection mode with optimized performance if the Data Grid contains a significant number of rows. To do this, set the <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxDataGrid-1.SelectionMode">SelectionMode</a> property to <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DataGridSelectionMode">DataGridSelectionMode.OptimizedMultipleSelection</a> and specify the <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxDataGrid-1.KeyFieldName">KeyFieldName</a> property.
    </p>
    <p>
        In this mode, the Data Grid does not store row data objects and information about all the selected rows. The Data Grid stores row key values instead. If you select all rows in the Data Grid UI or in code, and then unselect rows, the component stores keys of unselected rows only (and vice versa).

        This mode reduces the amount of stored data and increases performance, but may corrupt database integrity.
    </p>
    <p>
        Add the <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxDataGridSelectionColumn">DxDataGridSelectionColumn</a> to select data rows with checkboxes. Set the <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxDataGrid-1.SelectAllMode">SelectAllMode</a> property to <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DataGridSelectAllMode">AllPages</a> to select all data rows simultaneously with the <b>Select All</b> checkbox.
        To track selection changes in this mode, use the <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxDataGrid-1.OptimizedMultipleSelectionChanged">OptimizedMultipleSelectionChanged</a> event.
    </p>
</div>

@if (DataSource == null)
{
    <p><em>Loading...</em></p>
}
else
{
    <div class="card demo-card-wide border-bottom-0 mw-1100" style="border-bottom-left-radius: 0; border-bottom-right-radius: 0">
        <div class="card-header border-bottom-0">The total count of selected rows: <b>@SelectedCount</b> (stored selected rows: <b>@StoredSelectedCount</b>, stored unselected rows: <b>@StoredUnselectedCount</b>)</div>
    </div>

    <DxDataGrid Data="@DataSource" @ref="@grid"
                KeyFieldName="Id"
                SelectionMode="DataGridSelectionMode.OptimizedMultipleSelection"
                SelectAllMode="DataGridSelectAllMode.AllPages"
                OptimizedMultipleSelectionChanged="OnSelectionChanged"
                CssClass="datagrid-border-radius-top-0 mw-1100">
        <DxDataGridSelectionColumn Width="50px"></DxDataGridSelectionColumn>
        <DxDataGridColumn Field="@nameof(ProductFlat.ProductName)" Caption="Product Name"></DxDataGridColumn>
        <DxDataGridColumn Field="@nameof(ProductFlat.Category)"></DxDataGridColumn>
        <DxDataGridColumn Field="@nameof(ProductFlat.Subcategory)"></DxDataGridColumn>
    </DxDataGrid>

    <CodeSnippet_Grid_Selection_PerformanceOptimized />
}

@code {
    DxDataGrid<ProductFlat> grid;
    bool gridInitialized;

    IEnumerable<ProductFlat> DataSource;

    int SelectedCount { get; set; }

    int StoredSelectedCount { get; set; }

    int StoredUnselectedCount { get; set; }

    protected override async Task OnInitializedAsync()
    {
        DataSource = await FlatProductService.LoadAsync();
    }

    protected override void OnAfterRender(bool firstRender)
    {
        if (!gridInitialized && grid != null)
        {
            gridInitialized = true;

            foreach (var product in DataSource.Take(10).Where((p, i) => i % 2 != 0))
                grid.SetDataRowSelected(product, true);
        }
    }

    protected async Task OnSelectionChanged(DataGridSelection<ProductFlat> selection)
    {
        StoredSelectedCount = selection.SelectedKeysStored.Count();
        StoredUnselectedCount = selection.UnselectedKeysStored.Count();
        var selectedKeys = await selection.SelectedKeys;
        SelectedCount = selectedKeys.Count();
        await InvokeAsync(StateHasChanged);
    }
}
